<template>
  <div class="content log">
    <div class="search-content">
      <el-form :model="searchContent" ref="searchFrom" :inline="true">
        <el-form-item prop="storeName" label="经销商名称：">
          <el-input v-model="searchContent.store_name" placeholder="请输入" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item prop="consult_type" label="审核状态：">
            <el-select v-model="searchContent.status" placeholder="请选择">
                <el-option
                    v-for="item in statusType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
         <el-form-item prop="time" label="日期：">
            <el-date-picker
                v-model="searchContent.time"
				value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="logList" style="width:100%;">
      <el-table
        :data="aList"
        border
        style="width: 100%"
        :height="oHeight"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column fixed prop="id" label="日志ID" key="id" width="80"></el-table-column>
        <el-table-column
          prop="store_name"
          label="经销商名称"
          key="store_name"
          min-width="160"
          :show-overflow-tooltip="true"
        ></el-table-column>
         <el-table-column
          prop="store_owner"
          label="公司全称"
          key="store_owner"
          min-width="160"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="recharge_amount"
          label="充值金额"
          min-width="120"
          key="recharge_amount"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="surplus_amount"
          label="剩余金额"
          min-width="120"
          key="surplus_amount"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="remarks" label="备注" key="remarks" min-width="250" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="addtime" label="添加时间" key="addtime" min-width="160" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="status" label="审核状态" #default="{row}" min-width="120">
          <span :class="`status_${row.status}`">{{handleStatus(row.status)}}</span>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-button size="mini" type="primary" @click="exportFile">导出</el-button>
        <pagination
        :arr="aList"
        :total="total"
        :currentPage="currentPage"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      ></pagination>
      </div>
    </div>
  </div>
</template>
<script>
import pagination from "@/components/pagination/pagination.vue";
import { resize } from "@/common/js/height.js";
export default {
  name: "log",
  data() {
    return {
      input: "",
      aList: [],
      oHeight: 800,
      total: 1,
      currentPage: 1,
      storeName: "",
      searchContent: {
        //该变量一直在变，用来定义默认搜索内容
        store_name: "",
        status: '',
        time:[],
        
      },
      searchObj: {
        //该变量定义查询传参
        pagesize: localStorage.getItem("eachNum")
          ? parseInt(localStorage.getItem("eachNum"))
          : 10
      },
      statusType: [
        {value: 0, label: '未审核'}, 
        {value: 1, label: '已审核'}, 
        // {value: 2, label: '已拒绝'}
      ]
    };
  },
  components: {
    pagination
  },
    methods: {
        exportFile() {
         var host;
        if (this.$store.state.isServer) {
            host = location.host.replace("admin", "api");
        } else {
            host = location.host + "/api";
        }
        var url = location.protocol + "//" + host + "/admin/store/index.php?act=smsRecharge&op=smsLogList&is_export=1";
            url = url + `&store_name=${this.searchContent.store_name}&status=${this.searchContent.status}&addtime_start=${this.searchContent.time[0]? new Date(this.searchContent.time[0]).getTime() / 1000 : ""}&addtime_end=${this.searchContent.time[1] ? new Date(this.searchContent.time[1]).getTime() / 1000 : ""}`;
            window.location.href = url;
    },
    getList() {
      var that = this;
          this.searchObj.curpage = that.currentPage;
        let data = this.searchObj;
          data.addtime_start =this.searchContent.time[0]? new Date(this.searchContent.time[0]).getTime() / 1000 : "";
          data.addtime_end =this.searchContent.time[1] ? new Date(this.searchContent.time[1]).getTime() / 1000 : "";
      this.$http
        .post(
          "/admin/store/index.php?act=smsRecharge&op=smsLogList",
          data
        )
        .then(
          res => {
            if (res.code == 1) {
              this.aList = res.data;
              this.total = parseInt(res.show_page.TotalNum);
            } else {
              alert(res.msg);
            }
          },
          err => {
            alert(err);
          }
        );
    },
    search() {
      this.searchObj.store_name = this.searchContent.store_name;
        this.searchObj.status = this.searchContent.status;
        this.currentPage = 1;
      this.getList();
    },
    reset() {
      //重置搜索列表
      //1、获取搜索的内容
      this.currentPage = 1;
      this.searchContent.store_name = this.searchObj.store_name = "";
      this.searchContent.status = this.searchObj.status = "";
        this.searchContent.time = this.searchObj.time = [];
      //2、获取内容列表
      this.getList();
    },
    //每页数据
    handleCurrentChange: function(val) {
      this.currentPage = val;
      /*请求数据*/
      this.getList();
    },
    //分组一页多少数据
    handleSizeChange(val) {
      this.currentPage = 1;
      this.searchObj.page = 1;
      localStorage.setItem("eachNum", val);
      this.searchObj.pagesize = this.eachNum = val;
      /*请求数据*/
      this.getList();
    },
    handleStatus(status) {
      const type = this.statusType.find(item => item.value == status)
      return type ? type.label : '--'
    }
  },
  mounted() {
    //页面刷新就执行
    resize(this);
  },
  created() {
   this.getList();
  }
};
</script>
<style scoped lang="scss">
  .status_0 {
    color: #999
  }
  .status_1 {
    color: #57A631
  }
  .status_2 {
    color: #F56C6C
  }
  .paginationOne {
    margin-top: -40px;
}
.pagination .el-button {
    margin-top: 16px;
    margin-left: 20px;
}
</style>
